2012年03月12日
▲→川俣晶の縁側→ソフトウェア→技術雑記 total 4183 count

JavaScript研究・動的に追加したScriptタグに記述されたスクリプトはいつ実行されるか

Written By: 川俣 晶連絡先

default.htm §

<!DOCTYPE html>

<html>

<head id="head1">

    <title></title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

    <script type="text/javascript" src="js1.js"></script>

</head>

<body>

</body>

</html>

js1.js §

$(document).ready(function () {

    alert("1");

    var elem = document.createElement("script");

    alert("2");

    elem.setAttribute("src", "js2.js");

    alert("3");

    $("#head1").append(elem);

    alert("4");

});

js2.js §

alert("in js2");

結果 §

　IE9, Safari, Firefoxは、ローカルのファイルシステムで実行すると以下の順。

  • 1,2,3,in js2,4

　ところが、Chromeだけ"in js2"を飛ばしてしまうのです。

　それじゃjsonpで困るだろうと思ってWebサーバに配置してから実行するとchromeの動作も他の同じになりました。

まとめ §

　というわけで、実行されるのはcreateElementしたときでも、setAttributeでURLを指定した時でもなく、ツリーにアペンドされたときのようですね。